<template>
  <div class="login-container">
    <div class="left-section">
      <div class="content">
        <h1>秒杀商城</h1>
        <p>发现好物，抢购优惠，尽在秒杀商城</p>
      </div>
    </div>
    <div class="right-section">
      <div class="login-form">
        <h2>欢迎登录</h2>
        <form @submit.prevent="handleLogin">
          <div class="form-group">
            <input 
              type="text" 
              v-model="username" 
              placeholder="请输入用户名"
              :class="{ 'error': usernameError }"
            >
            <span class="error-message" v-if="usernameError">{{ usernameError }}</span>
          </div>
          <div class="form-group">
            <input 
              type="password" 
              v-model="password"
              placeholder="请输入密码"
              :class="{ 'error': passwordError }"
            >
            <span class="error-message" v-if="passwordError">{{ passwordError }}</span>
          </div>
          <button type="submit" class="login-btn" :disabled="loading">
            <span v-if="loading" class="loading-spinner"></span>
            登录
          </button>
          <div class="register-link">
            还没有账号？<router-link to="/register">立即注册</router-link>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { validateLogin } from '@/api/api.js'

const router = useRouter()
const username = ref('')
const password = ref('')
const usernameError = ref('')
const passwordError = ref('')
const loading = ref(false)

const validateForm = () => {
  let isValid = true
  usernameError.value = ''
  passwordError.value = ''

  if (!username.value.trim()) {
    usernameError.value = '用户名不能为空'
    isValid = false
  }

  if (!password.value) {
    passwordError.value = '密码不能为空'
    isValid = false
  }

  return isValid
}

const handleLogin = async () => {
  if (validateForm()) {
    try {
      loading.value = true

      // 调用登录接口
      const res = await validateLogin({
        user_name: username.value,
        user_pass: password.value
      });

      // 检查响应状态
      console.log('登录响应:', res);
      
      if (res.code === 200) {
        ElMessage.success('登录成功')
        // 存储用户信息到本地存储
        localStorage.setItem('user', JSON.stringify(res.data.user));
        // 存储token到本地存储
        localStorage.setItem('token', res.data.token);
        // 根据用户角色跳转到不同页面
        const targetPath = res.data.user.role_name === 'admin' ? '/manager/dashboard' : '/'
        router.push(targetPath)
      } else {
        ElMessage.error(res.message || '登录失败')
      }
    } catch (error) {
      ElMessage.error('登录出错，请稍后重试')
      console.error('登录错误：', error)
    } finally {
      loading.value = false
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  height: 100vh;
  
  .left-section {
    flex: 1;
    background: linear-gradient(135deg, #1890ff 0%, #1890ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    
    .content {
      text-align: center;
      h1 {
        font-size: 3rem;
        margin-bottom: 1rem;
      }
      p {
        font-size: 1.2rem;
        opacity: 0.9;
      }
    }
  }

  .right-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;

    .login-form {
      width: 400px;
      padding: 40px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

      h2 {
        text-align: center;
        margin-bottom: 30px;
        color: #333;
      }

      .form-group {
        margin-bottom: 20px;

        input {
          width: 100%;  // 修改为100%
          padding: 12px;
          border: 1px solid #ddd;
          border-radius: 4px;
          outline: none;
          transition: border-color 0.3s;
          box-sizing: border-box; // 添加盒模型设置

          &:focus {
            border-color: #1890ff;
          }

          &.error {
            border-color: #ff4d4f;
          }
        }

        .error-message {
          color: #ff4d4f;
          font-size: 12px;
          margin-top: 4px;
        }
      }

      .login-btn {
        width: 100%;
        padding: 12px;
        background: #1890ff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        transition: background 0.3s;

        &:hover {
          background: #096dd9;  // 使用固定的更深色值
        }

        &:disabled {
          background: #b3d7ff;
          cursor: not-allowed;
        }
      }

      .register-link {
        margin-top: 16px;
        text-align: center;
        font-size: 14px;
        
        a {
          color: #1890ff;
          text-decoration: none;
          
          &:hover {
            text-decoration: underline;
          }
        }
      }

      .loading-spinner {
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255, 255, 255, 0.7);
        border-top: 2px solid white;
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
        display: inline-block;
        margin-right: 8px;
        vertical-align: middle;
      }
    }
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
